<template>
  <div class="container flexRow">
    <div class="conLeft">
      <el-form :inline="true" :model="filterData" class="search">
        <el-form-item label="">
          <el-input
            clearable
            placeholder="请输入角色名称"
            v-model="filterData.name"
          />
        </el-form-item>
        <el-form-item>
          <el-button :icon="Search" @click="search" />
          <el-button type="primary" @click="editFormVisible = true">
            新增
          </el-button>
        </el-form-item>
      </el-form>
      <div class="table-contain">
        <Table
          height="100%"
          :columns="columns"
          @row-click="rowClick"
          v-loading="loading"
          :data="tableData"
        >
          <template #edit="{ row }">
            <el-button
              size="small"
              plain
              :icon="Edit"
              type="primary"
              @click="onAuthorityEditForm(row)"
            >
              权限配置
            </el-button>
            <el-button
              size="small"
              plain
              :icon="Edit"
              type="warning"
              @click="edit(row)"
            >
              编辑
            </el-button>
            <el-button
              size="small"
              plain
              :icon="Delete"
              type="danger"
              @click="del(row)"
            >
              删除
            </el-button>
          </template>
        </Table>
      </div>
      <Page
        :page-data="pageData"
        :total="total"
        @page-no-change="pageNoChange"
        @page-size-change="pageSizeChange"
      />
    </div>
    <div class="conRight">
      <user-list ref="userListRef"></user-list>
    </div>

    <RoleEditForm
      v-model:visible="editFormVisible"
      v-model:data="rowData"
      @submit="search"
    />
    <RoleAuthorityEditForm
      v-model:visible="authorityEditForm"
      v-model:data="rowData"
      @submit="search"
    />
  </div>
</template>

<script lang="ts" setup>
import { onMounted, ref, watch } from "vue";
import { deleteRole, selectRole, sysRolePage } from "@/api/system";
import Page from "@/components/pageTable/Page.vue";
import Table from "@/components/pageTable/table";
import { ElMessage, ElMessageBox } from "element-plus";
import RoleEditForm from "@/views/authManage/components/RoleEditForm.vue";
import { Delete, Edit, Search } from "@element-plus/icons-vue";
import { usePage } from "@/hooks/usePage.ts";
import UserList from "./components/UserList.vue";
import RoleAuthorityEditForm from "@/views/authManage/components/RoleAuthorityEditForm.vue";

const userListRef = ref<InstanceType<typeof UserList>>();
let rowData = ref<any>(null);
const columns: any[] = [
  { prop: "roleName", label: "角色名称", width: 220 },
  { prop: "roleCode", label: "code", width: 220 },
  { prop: "edit", label: "操作", template: true, width: 300 },
];
const editFormVisible = ref<boolean>(false);
const authorityEditForm = ref<boolean>(false);
let filterData = ref({ name: "" });
const {
  loading,
  tableData,
  pageData,
  total,
  search,
  pageNoChange,
  pageSizeChange,
} = usePage(sysRolePage, filterData);

async function edit(row: any) {
  const { data, success } = await selectRole(row?.id);
  if (!success) {
    return;
  }
  rowData.value = data;
  editFormVisible.value = true;
}

function onAuthorityEditForm(row: any) {
  rowData.value = row;
  authorityEditForm.value = true;
}

async function del(row: any) {
  ElMessageBox.confirm(`是否删除?`, "提示", {
    confirmButtonText: "确定",
    cancelButtonText: "取消",
    type: "warning",
  }).then(async () => {
    const { success, msg } = await deleteRole(row?.id);
    if (!success) {
      ElMessage.error(msg);
      return;
    }
    ElMessage.success("操作成功");
    await search();
  });
}

function rowClick(data: any) {
  userListRef.value.initList(1, data.id);
}

onMounted(async () => {
  await search();
});
watch(
  tableData,
  async () => {
    userListRef.value.initList(1, "");
  },
  { deep: true },
);
</script>

<style scoped lang="scss">
@import "@/assets/styles/common";
.conLeft {
  width: 760px;
  .table-contain {
    width: 100%;
    height: calc($router-component-contain-height - 80px);
  }
}
.conRight {
  width: calc(100% - 770px);
}
</style>
